<template>
  <div id="app">
    <Tabber :key="topbarkey"></Tabber>
    <Header></Header>
    <router-view @updateKey='updateKeyFn'/>
    <div>vuex{{isShowMadal}}</div>
    <Footer></Footer>
    <Login v-show="isShowMadal"></Login>
     <transition name="slide">
    <Toast v-show="isShowToast"></Toast>
     </transition>

  </div>
</template>
<script>
import Tabber from './components/Tabbar.vue';
import Header from './components/Header.vue';
import Footer from './components/Footer.vue';
import Login from './components/Login.vue';
import Toast from './components/Toast.vue';
// import axios from "./request/request"; 
import {JingPinAPI,ReMenAPI} from './request/api';
import {mapState} from 'vuex'
export default {
  data () {
    return {
    topbarkey:0,  
    }
  },
  components: {
    Tabber,
    Header,
    Footer,
    Login,
    Toast
  },
  async created () {
    console.log('开始请求数据');
    // 第一种方案
    // axios
    // .get('http://kumanxuan1.f3322.net:8881/cms/products/recommend')
    // .then((res)=>{
    //   console.log('请求结果为',res);
    // })

    // 第二种
  //  axios.get('/products/recommend').then((res)=>{
  //     console.log('请求结果为',res);
  //   })

    // 第三种
    //  JingPinAPI().then((res) => {
    //   console.log("精品数据为", res);
    // });
    // ReMenAPI().then((res) => {
    //   console.log("热门数据为", res);
    // });


    // 第四种  回调地狱
    let res =await JingPinAPI();
    console.log('1',res);
    console.log('2');
    let res2=await ReMenAPI()
    console.log('3',res2);
    console.log('4');


  },
      computed: {
        ...mapState({
            isShowMadal:(state)=>state.showModal.isShowMadal,
            isShowToast:state=>state.showToast.isShowToast
        })
    },
      methods: {
    updateKeyFn(){
      this.topbarkey++
    }
  },
    watch:{
    "$route.path":{
      handler(newVal,oldVal){
        console.log('地址变化了');
        if(oldVal !='/'){
          this.topbarkey++;
        }
      }
    }
  }
}
</script>
<style lang="less">
.slide-enter, .slide-leave-to{
  opacity: 0;
}

.slide-enter-active, .slide-leave-active{
  transition: opacity .3s linear;
}

.slide-enter-to, .slide-leave{
  opacity: 1;
}
</style>
